<template>
  <section>
    <el-collapse>
      <el-collapse-item v-for="i in item.data.vals" :key="i.code" :title="i.title">
        <TextEditor v-model="i.val" :editorToolbar="customToolbar" :id="i.code" placeholder="请输入……" style="height: 200px"></TextEditor>
      </el-collapse-item>
    </el-collapse>
    <el-row style="margin-top: 10px">
      <div>
        <el-button size="mini" type="primary" @click="savePage(item)"  v-if="item.state === 0">测试·保存</el-button>
        <el-button type="danger" size="mini" @click="delPage">删除</el-button>
        <el-button type="success" size="mini" @click="finishePage" style="float: right;margin-right: 0px"  v-if="item.state === 0">完成</el-button>
      </div>
      <div v-if="item.state === 1">
          <span style="color: red;font-weight: bold">
          报告项已创建完毕
          </span>
      </div>
    </el-row>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import  TextEditor from '@/components/TextEditor'
  import errHandler from '@/assets/errHandler.js'
  export default {
    name: "No5",
    props: ['item'],
    components:{TextEditor},
    data() {
      return {
        customToolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['image','code-block']],
      }
    },
    created(){
      if(this.item.data.vals){
        console.log('有val')
      }else {
        Vue.set(this.item.data,'vals',this.item.reportModule.metadata.detail)
        console.log('没val')
      }
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      savePage(){
        console.log(this.item.data.vals)
        this.$emit('save')
      },
      delPage(){
        this.$emit('del')
      },
      finishePage(){
        this.$emit('finish')
      }
    }
  }
</script>

<style scoped>

</style>
